<template>
  <div>
    <video ref="videoRef" controls class="w-screen h-screen"></video>
  </div>
</template>
<script lang="ts" setup>
import Hls from "hls.js";
import { onMounted, ref } from "vue";

const videoRef = ref<HTMLVideoElement | null>(null);
const init = () => {
  const videoSrc = "https://eolive.liveyunbo.cn/vod2Live/34ss5dddd99.m3u8";
  const hls = new Hls();
  if (!videoRef.value) return;
  if (Hls.isSupported()) {
    if (videoRef.value) {
      hls.loadSource(videoSrc);
      hls.attachMedia(videoRef.value);
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        if (videoRef.value) {
          videoRef.value.muted = true;
          videoRef.value.play();
        }
      });
    }
  }
  // 原生 HLS 支持检查
  else if (videoRef.value.canPlayType("application/vnd.apple.mpegurl")) {
    videoRef.value.src = videoSrc;
    videoRef.value.addEventListener("loadedmetadata", function () {
      if (videoRef.value) {
        videoRef.value.muted = true;
        videoRef.value.play();
      }
    });
  }
};
onMounted(init);
</script>
<style lang="stylus" scoped></style>
